<template>
  <div class="panel">
    <div class="line top">
      <Ev-Router layer="top" />
    </div>
    <div class="line">
      <div class="cell left">
        <Ev-Router layer="left" />
      </div>
      <div class="cell">
        <Ev-Router layer="content" />
      </div>
      <div class="cell right">
        <Ev-Router layer="right" />
      </div>
    </div>
    <div class="line foot">
      <Ev-Router layer="foot" />
    </div>
  </div>
</template>
<script>
import EvRouter from '../views/Router'
/**
 * Panel 实现了一个3,3的布局
 *   |————————————————————————————|
 *   |            top             |
 *   |————————————————————————————|
 *   |    |                 |     |
 *   |left|     content     |right|
 *   |    |                 |     |
 *   |————————————————————————————|
 *   |           right            |
 *   |————————————————————————————|
 */
export default {
  components: { EvRouter }
}
</script>

<style scoped>
.panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.line {
  display: flex;
  flex-direction: row;
  margin-top: 18px;
}
.cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.top {
  margin-top: 0;
}
.left, .right {
  flex-grow: 0;
}
.left {
  background-color: brown;
}
.right {
  background-color: aqua;
}
</style>
